import { useState } from "react";
import "./App.css";
import { createContext } from "react";
import { useContext } from "react";

function Detail({ name, active }) {
  const leavl = useContext(LervlContext);
  return (
    <p>
      内容: {name} 状态: {active ? "显示" : "隐藏"}  当前leavl: {leavl}
    </p>
  );
}

const Artice = ({
  id,
  detail,
  onActive,
  children,
  footer = <p>默认底部</p>,
}) => {
  const leavl = useContext(LervlContext);
  const setId = () => {
    onActive(id);
  };

  return (
    <>
      <LervlContext.Provider value={leavl + 1}>
        <h2 onClick={setId}>标题{id}  当前leavl: {leavl}</h2>
        {children}
        <Detail {...detail} />
        {footer} 
      </LervlContext.Provider>
    </>
  );
};

const LervlContext = createContext(1);

function App2() {
  const [count, setCount] = useState(0);
  const [idkey, setIdKey] = useState(4);

  const [clid, setClid] = useState(0);

  const [data, setData] = useState([
    { id: 1, detail: { name: "赵", active: true }, footer: <p>底部标签A</p> },
    { id: 2, detail: { name: "钱", active: true } },
    { id: 3, detail: { name: "孙", active: true } },
  ]);

  const handelActive = (id) => {
    setClid(id);
  };

  const listData = data.map((item) => (
    <Artice {...item} onActive={handelActive}>
      <p>Artice 内容 {count}</p>{" "}
    </Artice>
  ));

  const addnum = () => {
    setCount(count + 2);
    setIdKey(idkey + 1);
    setData([...data, { id: idkey, name: "李" + idkey }]);
  };

  const qs = count / 2 === 0 ? <p>偶数</p> : <p> 奇数</p>;

  return (
    <>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <button onClick={addnum}>count is {count}+2</button>
        {qs}
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <h2>当前点击了 {clid}</h2>
      <div className="read-the-docs">{listData}</div>
    </>
  );
}

export default App2;
